<template>
  <view class="background-white">
    <view class="bor-btm">
      区域名称：<text>{{ detail.eventName || '--' }}</text>
    </view>
    <view class="bor-btm">
      报警时间：<text>{{ detail.startTime || '--' }}</text>
    </view>
    <view class="bor-btm">
      等级：<text :class="['tag', `tag-${detail.alarmLevel}`]">{{ detail.alarmLevelLabel || '--' }}</text>
    </view>
    <view class="bor-btm">
      报警内容：<text>{{ detail.content || '--' }}</text>
    </view>
    <view class="bor-btm">
      触警人员：<text>{{ detail.touchUserNames || '--' }}</text>
    </view>
    <view class="bor-btm">
      接警人：<text>{{ detail.receiveUserNames || '--' }}</text>
    </view>
    <view class="bor-btm">
      处理人：<text>{{ detail.handlerUserName || '--' }}</text>
    </view>
    <view class="bor-btm">
      处理时间：<text>{{ detail.handlerTime || '--' }}</text>
    </view>
    <view v-if="!hiddenResult" class="bor-btm">
      处理记录：<text>{{ detail.handlerResult || '--' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GatherDetailItem',

  components: {},

  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    hiddenResult: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {}
  },

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {
    goDetail(item) {}
  }
}
</script>

<style scoped lang="scss">
.warn-title {
  color: #999;
  margin-bottom: 6rpx;
  margin-left: -20rpx;
}

.background-white {
  background-color: #fff;
  padding: 0rpx 0rpx 0rpx 30rpx;

  view {
    padding: 14rpx 0;

    text {
      color: #333;
    }
  }

  .bor-btm {
    border-bottom: 1px solid #d5d7e3;
    padding: 24rpx 0;
    padding-right: 24rpx;
    color: #999;
    .tag {
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      color: #fff;
      &-1 {
        background: #f3c51b;
      }
      &-2 {
        background: #ff7800;
      }
      &-3 {
        background: #ff2400;
      }
    }
  }
}
</style>
